<template>
  <div class="app-container">
    <div class="profile-card">
      <profile-card ref="profile"/>
    </div>
    <div class="content-card">
      <el-tabs type="card" v-model="activeTab">
        <el-tab-pane label="基本信息" name="userinfo">
          <user-info-card ref="info"/>
        </el-tab-pane>
        <el-tab-pane label="任职信息" name="post">
          <user-post-card ref="post" :user-id="$store.state.user.id" />
        </el-tab-pane>
        <el-tab-pane label="收藏网址" name="website">
          <website-card ref="post" :user-id="$store.state.user.id"/>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import ProfileCard from "./components/ProfileCard.vue";
import UserInfoCard from "./components/UserInfoCard.vue";
import WebsiteCard from "./components/WebsiteCard.vue";
import UserPostCard from "./components/UserPostCard.vue";

export default {
  name: "Profile",
  components: {UserPostCard, WebsiteCard, UserInfoCard, ProfileCard},
  data() {
    return {
      userId: undefined,
      activeTab: "userinfo"
    };
  },
  created() {
    console.log(this.$store)
  },
  methods: {
  }
};
</script>
<style lang="scss" scoped>
@import "../../../assets/styles/variables";
.profile-card {
  width: 25%;
  height: 100%;
  display: inline-block;
  vertical-align: top;
}

::v-deep.content-card {
  width: calc(75% - 15px);
  height: 100%;
  margin-left: 15px;
  display: inline-block;
  vertical-align: top;
  .el-tabs__header {
    height: 45px;
  }
  .el-tabs__item {
    font-size: $base-title-font-size;
    font-weight: 400;
  }
  .el-tabs__content {
    padding: 0 !important;
  }
}
</style>
